<%@page import="java.awt.print.Printable"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>_${customer.customerName}_拣货</title>
<script type='text/javascript' src='http://wms.ttyuncang.com/WebSpeech.js'></script>
<script type="text/javascript">
    
    var curItemId='';
    var isbinded=false;
 
	$(function() {
	
	      $("#txt_sku").val('');
		  $("#txt_boxCode").val('');
		  
		  setCurTaskItem();
		  
		  
		  var status='${task.status}';
		  var boxCode='${task.boxCode}';
		  
		  if(status=='2'){
		     isbinded=false;
		     $("#txt_workBoxCode").focus();
		  }else{
		     isbinded=true;
		     $("#txt_workBoxCode").val("已绑定箱子："+boxCode);
		     $("#txt_workBoxCode").attr("disabled","disabled");
		     $("#txt_boxCode").focus();
		  }
		  
		  WebSpeech.speak("听到声音了么");
	});
	
	function setCurTaskItem(){
	  
	  $("#tbody_taskItem").find('tr').css("background-color","");
	  curItemId='';
	  $("[name='cur']").html('');
	  
	  $("#tbody_taskItem").find('tr').each(function(){
			var taskItemId=$(this).attr("name");
			var pickStatus=$("#pickStatus_"+taskItemId).attr("name");
			if(pickStatus!='picked'){
				
				$(this).css("background-color","#66CCFF");
				$("#pickStatus_"+taskItemId).html("拣货中...");
				
				curItemId=taskItemId;
				
                var cur_stockCode=$("#stockCode_"+curItemId).html();
                var cur_boxCode=$("#boxCode_"+curItemId).html();
                var cur_orderno=$("#orderno_"+curItemId).html();
                var cur_sku=$("#sku_"+curItemId).html();
                var cur_num=$("#num_"+curItemId).html();
                var cur_pickStatus=$("#pickStatus_"+curItemId).html();
                
                $("#cur_stockCode").html(cur_stockCode);
                $("#cur_boxCode").html(cur_boxCode);
                $("#cur_orderno").html(cur_orderno);
                $("#cur_sku").html(cur_sku);
                $("#cur_num").html(cur_num);
                $("#cur_pickStatus").html(cur_pickStatus);
				
				return false;
			}
	  });
	  
    }
	
	function keydown(){
      $("#msg").html('');
    }
    
    function change_boxCode(){
       //分拣框尚未绑定
       if(isbinded==false){
         $("#msg_box").css("color","red");
		 $("#msg_box").html("分拣框尚未绑定!");
		 WebSpeech.speak("分拣框尚未绑定!");
		 $("#txt_sku").val('');
		 $("#txt_boxCode").val('');
		 $("#txt_workBoxCode").val('');
		 $("#txt_workBoxCode").focus();
		 return ;
       }
       $("#txt_sku").focus();
    }

    //拣货
    function pick(){
      //分拣框尚未绑定
      if(isbinded==false){
         $("#msg_box").css("color","red");
		 $("#msg_box").html("分拣框尚未绑定!");
		 WebSpeech.speak("分拣框尚未绑定!");
		 $("#txt_sku").val('');
		 $("#txt_boxCode").val('');
		 $("#txt_workBoxCode").val('');
		 $("#txt_workBoxCode").focus();
		 return ;
      }
    
      var sku=$("#txt_sku").val();
      var boxCode=$("#txt_boxCode").val();
      $.ajax({
			type:'post',
			url:'${ctx}/pickTask/ajaxPick_1',
			data:{
				taskItemId:curItemId,
				boxCode:boxCode,
				sku:sku
			},
			dataType:'json',
			success:function(data) {
				var msg=data.status;
				$("#msg").css("font-size","25px");
				if(msg=='item_finishing'){
				    $("#msg").css("color","green");
					$("#msg").html("请拣货...(此任务项完成,继续下一任务项)");
                    
					$("#pickStatus_"+curItemId).attr("name","picked");
					$("#pickStatus_"+curItemId).html("已拣货");
					setCurTaskItem();
					
					$("#txt_boxCode").focus();
					$("#txt_boxCode").val('');
					$("#txt_sku").val('');
				}
				else if(msg=='error_finished'){
				    $("#msg").css("color","red");
					$("#msg").html("此任务项已完成");
					WebSpeech.speak("此任务项已完成");
				}
				else if(msg=='error_boxCode'){
				    $("#msg").css("color","red");
					$("#msg").html("库位箱编码错误!");
					$("#txt_boxCode").focus();
					$("#txt_boxCode").val('');
					$("#txt_sku").val('');
					WebSpeech.speak("库位箱编码错误");
				}
				else if(msg=='error_sku'){
				    $("#msg").css("color","red");
					$("#msg").html("扫描sku码错误！");
					$("#txt_sku").focus();
					$("#txt_sku").val('');
					WebSpeech.speak("扫描sku码错误");
				}
				else if(msg=='task_finishing'){
				    $("#msg").css("color","green");
					$("#msg").html("请拣货...");
					$("#pickStatus_"+curItemId).attr("name","picked");
					$("#pickStatus_"+curItemId).html("已拣货");
					setCurTaskItem();
					
					window.alert("此任务已经全部完成！请按“确定”继续。"); 
					location.href='${ctx}/pickTask/v2_toPickTaskListPage';
                    
				}
				
			},
			error:function() {
				alert("网络繁忙，请稍后重试...");
			}
	   });
    }
    
    //绑定分拣框
    function selectWorkBox(){
      var workBoxCode=$("#txt_workBoxCode").val().trim();
       $.ajax({
			type:'post',
			url:'${ctx}/pickTask/ajaxBindBox',
			data:{
				taskCode:'${task.taskCode}',
				workBoxCode:workBoxCode
			},
			dataType:'json',
			success:function(data) {
				var msg=data.status;
				
				if(msg=='error'){
				    $("#msg_box").css("color","red");
					$("#msg_box").html("分拣框条码有误!");
					
					$("#txt_workBoxCode").val('');
					$("#txt_workBoxCode").focus();
					WebSpeech.speak("分拣框条码有误");
				}else if(msg=='busy'){
				    
				    $("#msg_box").css("color","red");
					$("#msg_box").html("分拣框已被占用！");
					
					$("#txt_workBoxCode").val('');
					$("#txt_workBoxCode").focus();
					WebSpeech.speak("分拣框已被占用");
				}else if(msg=='success'){
				   isbinded=true;
				   $("#msg_box").css("color","green");
				   $("#msg_box").html("绑定分拣框成功！请拣货...");
				   $("#txt_boxCode").focus();
		           $("#txt_workBoxCode").attr("disabled","disabled");
				}else{
				   alert("网络异常...");
				   $("#txt_workBoxCode").val('');
				   $("#txt_workBoxCode").focus();
				}
				
			},
			error:function() {
				alert("网络繁忙，请稍后重试...");
			}
	   });
    }
    
</script>
</head>

<body>



<section class="content">

<div class="row">
		<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-edit"></i>
					<h3 class="box-title">当前任务项</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
				
	<table id="contentTable" class="table table-striped table-bordered table-condensed">
<!-- 	    <thead> -->
<!-- 			<th style="vertical-align: middle; color: white; " colspan="13" bgcolor="#8EB4CB">当前任务项</th> -->
<!-- 		</thead> -->
		<thead><tr>
			    <th width="90">库位编号</th>
			    <th>箱子编号</th>
			    <th>订单编号</th>
			    <th>SKU编号</th>
			    <th>待拣数量</th>
			    <th>状态</th>
			</tr></thead>
			
	        <tbody>
	          <tr id="tr_curTaskItem" height="50px;">
				   <td id="cur_stockCode" name="cur"></td>
				   <td id="cur_boxCode" name="cur"></td>
				   <td id="cur_orderno" name="cur"></td>
				   <td id="cur_sku" name="cur"></td>
				   <td id="cur_num" name="cur"></td>
				   <td id="cur_pickStatus" name="cur"></td>
			  </tr>
	        </tbody>
	       
	        <tr >
	           <td height="50" style="vertical-align:middle;font-weight: bold;">扫描分拣框</td>
	           <td colspan="7" height="50" >
	           
	           <div class="col-sm-2">
					<div class="input-group col-sm-12">
						<input type="text" id="txt_workBoxCode" onchange="selectWorkBox();"  class="form-control span3"  >
					</div>
				</div>
				<span style="margin-left:12px; margin-top: 10px; color: red;font-weight: bold;" id="msg_box"></span>
			             
					
	           </td>
	        </tr>
	       
	        <tr >
	           <td height="50" style="vertical-align:middle;font-weight: bold;">扫描商品</td>
	           <td colspan="7" height="50" >
	           
	           <div class="col-sm-3">
					<div class="input-group col-sm-12">
						<span class="input-group-text">  箱编码: </span> 
						<input type="text" id="txt_boxCode" onchange="change_boxCode();" onkeydown="keydown();"   class="form-control span3"   >
					</div>
				</div>
				
				 <div class="col-sm-3">
					<div class="input-group col-sm-12">
						<span class="input-group-text">  SKU: </span> 
						<input type="text" id="txt_sku" onchange="pick();" onkeydown="keydown();"    class="form-control span3"  >
					</div>
				</div>
								
								
<!-- 	                                       箱编码:<input type="text" id="txt_boxCode" onchange="change_boxCode();" onkeydown="keydown();" style="margin-top: 10px; margin-left: 10px;" > -->
	             
<!-- 	             <span style="margin-top: 10px; margin-left: 10px;">SKU:</span> -->
<!-- 	             <input type="text" id="txt_sku" onchange="pick();" onkeydown="keydown();" style="margin-top: 10px; margin-left: 10px;" > -->
	             <span style="margin-left:12px; margin-top: 10px; color: red;font-weight: bold;" id="msg"></span>
	           </td>
	        </tr>
	    
	</table>
	</div></div></div></div>
	
	
<div class="row">
		<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-edit"></i>
					<h3 class="box-title">拣货任务项</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
				
				
	<!-- 拣货任务项 -->
	<table class="table  table-bordered " style="margin-top: 0px;">
<!-- 		<thead> -->
<!-- 			<th style="vertical-align: middle; color: white; " colspan="13" bgcolor="#8EB4CB">拣货任务项 </th> -->
<!-- 		</thead> -->
		<thead><tr>
		        <th width="80">序号</th>  
			    <th>箱子编号</th>
			    <th>订单编号</th>
			    <th>SKU编号</th>
			    <th>SKU名称</th>
			    <th>已拣数量</th>
			    <th>待拣数量</th>
			    <th>状态</th>
			</tr></thead>
			
			<tbody id="tbody_taskItem">
			<c:forEach items="${taskItemList}" var="item" varStatus="i">
			    <tr id="tr_${item.id}" name="${item.id}" >
				   <td>${i.count}</td>
				   <td id="boxCode_${item.id}">${item.boxCode}</td>
				   <td id="orderno_${item.id}">${item.orderno}</td>
				   <td id="sku_${item.id}">${item.sku}</td>
				   <td id="skuName_${item.id}">${item.skuName}</td>
				   <td id="num_${item.id}">${item.pickedNum}</td>
				   <td id="num_${item.id}">${item.num}</td>
				   <td id="pickStatus_${item.id}" name="${item.pickStatus}">
				     <c:if test="${item.pickStatus eq 'unpicked'}">待拣货</c:if>
				     <c:if test="${item.pickStatus eq 'picking'}">拣货中</c:if>
				     <c:if test="${item.pickStatus eq 'picked'}">已拣货</c:if>
				   </td>
				</tr>
			</c:forEach>
			</tbody>
			
	</table>
	
</div></div></div></div>

</section>
</body>
</html>
